<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> Neo T RIA Demo Index </title>
<link href="../css/style.css" rel="stylesheet" />
</head>

<body>
<div class="sidebar">
    <div class="sidebar-inner" id="sidebar" style="padding-top:5px;"></div>
</div>

<div id="main" class="main">
    <p>图形</p>
    
</div>
</body>
<script type="text/javascript" src="../../src/otr.js"></script>
<script type="text/javascript" src="../../src/otr/util.js"></script>
<script type="text/javascript" src="../../src/otr/client.js"></script>
<script type="text/javascript" src="../../src/otr/objective.js"></script>
<script type="text/javascript" src="../../src/otr/context.js"></script>
<script type="text/javascript" src="../../src/graph/graph.js"></script>
<script type="text/javascript" src="../../src/graph/shape/shape.js"></script>
<script type="text/javascript" src="../../src/graph/shape/line.js"></script>
<script type="text/javascript" src="../../src/graph/shape/polyline.js"></script>
<script type="text/javascript" src="../../src/graph/shape/text.js"></script>
<script type="text/javascript" src="../../src/graph/shape/rect.js"></script>
<script type="text/javascript" src="../../src/graph/shape/cycle.js"></script>
<script type="text/javascript" src="../../src/graph/shape/polygon.js"></script>
<script type="text/javascript" src="../../src/graph/adapter/adapter.js"></script>
<script type="text/javascript" src="../../src/graph/adapter/vml.js"></script>
<script type="text/javascript" src="../../src/graph/adapter/canvas.js"></script>
<script type="text/javascript" src="../../src/graph/brush.js"></script>
<script type="text/javascript" src="../../src/graph/adapter/canvas_brush.js"></script>
<script type="text/javascript" src="../../src/graph/adapter/vml_brush.js"></script>
<script type="text/javascript" src="../js/common.js"></script>

<script type="text/javascript">

var g = OTR.Graph.factory({
    width: 500,
    height: 500
});

g.renderTo(document.getElementById('main'));

g.drawShape(new OTR.Graph.Rect({
    x: 15,
    y: 15,
    width: 100,
    height: 32,
    borderRadius: 5
}));

g.drawShape(new OTR.Graph.Cycle({
    x: 100, 
    y: 100,
    width: 100,
    height: 100,
    background: '#57e4f3'
}));
/*
g.drawShape(new OTR.Graph.Cycle({
    x: 200, 
    y: 200,
    width: 100,
    height: 50,
    background: '#57e4f3'
}));
*/
g.drawShape(new OTR.Graph.Line({
    x: 300, 
    y: 100,
    dx: 240,
    dy: 47,
    endArrow: 'block'
}));
g.drawShape(new OTR.Graph.Line({
    x: 150, 
    y: 200,
    dx: 150,
    dy: 225
}));
g.drawShape(new OTR.Graph.Line({
    x: 150, 
    y: 225,
    dx: 200,
    dy: 225,
    endArrow: 'Block'
}));

g.drawShape(new OTR.Graph.PolyLine({
    points: [
        [200, 150],
        [250, 150],
        {x: 250, y: 200}
    ],
    borderColor: '#dd0000',
    endArrow: 'Block'
}));

g.drawShape(new OTR.Graph.Polygon({
    sideCount: 4,
    x: 350,
    y: 350,
    width: 100,
    height: 50,
    background: '#fe78e3'
}));

g.drawShape(new OTR.Graph.Text({
    text: '这是一段文字',
    fontFamily: '微软雅黑',
    fontSize: '14px',
    align: 'left',
    x: 250 - 14 * 3,
    y: 0
}));

g.drawShape(new OTR.Graph.Polygon({
    sideCount: 6,
    x: 0,
    y: 350,
    width: 100,
    height: 100,
    background: '#fe78e3',
    rotate: 30
}));
</script>
</html>
